<template>
  <div class="s-box">
    <div class="userInfo-content">
      <img :src="user.avatar" alt="">
    </div>
    <div class="userInfo-content">
      <span class="text-large">{{user.username}}</span>
    </div>
    <div>
      <div class="userInfo-content profit-content">
        <div class="userInfo-item">
          <span>持有市值</span>
          <br>
          <span>{{user.totalAssets}}元</span>
        </div>
        <div class="userInfo-item">
          <span>今日收益</span>
          <br>
          <span :class="[user.todayProfit<0?'text-green':'text-red']">{{user.todayProfit | formatPlusMinus}}元</span>
        </div>
        <div class="userInfo-item" @click="actionShow = true">
          <span>可用金额</span>
          <br>
          <span>{{user.totalAmount}}元</span>
        </div>
      </div>
      <div class="userInfo-content profit-content">
        <div class="userInfo-item">
          <span>总资产</span>
          <br>
          <span>{{user.allAssets}}元</span>
        </div>
        <div class="userInfo-item">
          <span>净资产</span>
          <br>
          <span>{{user.netAssets}}元</span>
        </div>
        <div class="userInfo-item">
          <span>我的负债</span>
          <br>
          <span>{{user.loanAmount}}元</span>
        </div>
      </div>
    </div>
    <group gutter="20px">
      <cell title="我的借贷" link="/loan"></cell>
      <cell title="用户反馈" link="/feedback"></cell>
    </group>
    <div>
      <confirm v-model="accountStatus"
               show-input
               :title="accountTitle"
               :input-attrs="{type: 'number',max:9}"
               @on-confirm="onConfirm">
      </confirm>
    </div>
    <actionsheet v-model="actionShow" :menus="actionMenus" @on-click-menu="chooseManage" show-cancel></actionsheet>

  </div>
</template>

<script>
  import {Confirm, Actionsheet, Cell, Group} from 'vux'

  export default {
    components: {
      Confirm,
      Actionsheet,
      Cell,
      Group
    },
    data() {
      return {
        user: {},
        accountStatus: false,
        actionMenus: {
          In: '充值',
          Out: '提现'
        },
        actionShow: false,
        accountTitle: ' ',
        accountType: 'In'
      }
    },
    created() {
      this.getUserAndProfit();
    },
    methods: {
      chooseManage(key) {
        if (key === 'In') {
          this.accountTitle = '请输入充值金额';
          this.accountType = 'In';
          this.accountStatus = true;
        } else if (key === 'Out') {
          this.accountTitle = '请输入提现金额';
          this.accountType = 'Out';
          this.accountStatus = true;
        } else {
          this.accountStatus = false;

        }
      },
      onConfirm(value) {
        if (isNaN(Number.parseFloat(value))) {
          this.$vux.toast.text('请输入正确数字', 'middle');
        } else {
          if (this.accountType === 'In') {
            this.$api.recharge({
              rechargeAmount: value
            }).then(data => {
              if (data.returnCode === 1) {
                this.$vux.toast.show({
                  position: 'top',
                  text: data.returnMsg,
                  isShowMask: true,
                  width: '4rem'
                });
                this.user.totalAmount = data.totalAmount;
              } else {
                this.$vux.toast.show({
                  position: 'middle',
                  text: data.returnMsg,
                  isShowMask: true,
                  width: '4rem'
                });
              }
            })
          } else if (this.accountType === 'Out') {
            this.$api.getCash({
              getCashAmount: value
            }).then(data => {
              if (data.returnCode === 1) {
                this.$vux.toast.show({
                  position: 'top',
                  text: data.returnMsg,
                  isShowMask: true,
                  width: '4rem'
                });
                this.user.totalAmount = data.totalAmount;
              } else {
                this.$vux.toast.show({
                  position: 'middle',
                  text: data.returnMsg,
                  isShowMask: true,
                  width: '4rem'
                });
              }
            })
          }
        }
      },
      getUserAndProfit() {
        /*this.$api.getUser((data) => {
//          console.log(data);
          this.user = data.user;
        })*/
        this.$api.getUserAndProfit().then((data) => {
          this.user = data.user;
        })
      },
      test() {
        this.$vux.toast.show({
          position: 'middle',
          text: '暂未开放',
          isShowMask: true,
        });
      }
    }
  }
</script>

<style lang="less" scoped>
  .userInfo-content {
    text-align: center;
    margin-top: .47rem;
    font-size: 0;
    img {
      width: 3rem;
      height: 3rem;
      border-radius: 50%;
    }
    .userInfo-item {
      display: inline-block;
      width: 40%;
      &:not(:first-child) {
        border-left: 1px solid #f1f1f1;
      }
    }
  }

  .profit-content {
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    height: 1.6rem;
    align-items: center;
    justify-content: center;
    font-size: 0;
    margin-top: 0;
    &:first-child {
      margin-top: .2rem;
    }
    span {
      font-size: .3rem;
    }
  }
</style>
